// 同一个虚拟节点, 进行精细化比较

import createElement from "./createElement";
import updateChildren from "./updateChildren";

export default function patchVnode(oldVnode, newVnode) {
  // 判断新旧vnode是否为相同对象
  if (newVnode === oldVnode) return;
  
  // 判断新vnode的text是否存在（如果存在就没有children了）
  if (newVnode.text != undefined && (newVnode.children === undefined || newVnode.children.length === 0)) {
    // 存在text属性 -- 判断新老vnode中的text是否相同
    if (newVnode.text !== oldVnode.text) {
      // 新老vnode中的text不相同,直接更新 --- 如果老vnode里是children，也会直接更新掉
      oldVnode.elm.innerText = newVnode.text;
    } 
  } else {
    // 新vnode不存在text属性，而是children
    console.log('newVnode不存在text属性，而是children');
    if (oldVnode.children !== undefined && oldVnode.children.length > 0) {
      console.log('此时oldVnode也不存在text属性，而是children，进行updateChildren核心比较更新')
      // 核心比较---此时新vnode的dom还未创建，用旧的elm就行（因为已经判断好了它俩是同一个elm了）
      updateChildren(oldVnode.elm, newVnode.children, oldVnode.children);

    } else {
      console.log('此时oldVnode存在text属性，而没有children，则清除text，然后循环创建新vnode.children的每个节点')
      // 老vnode是text -- 先清除text，然后循环创建新vnode.children的每个节点
      oldVnode.elm.innerText = '';
      for(let i = 0; i < newVnode.children.length; i++) {
        let childDom = createElement(newVnode.children[i]);
        oldVnode.elm.appendChild(childDom);
      }

    }
  }
}